<template>
  <div id="personTrainingTable" style="padding-top:10px">
    <div v-if="loading" style="padding:10px;">数据加载中...</div>
    <div v-else>
      <section style="margin-top:10px" v-if="trainingList&&trainingList.length>0">
        <el-table :data="trainingList" highlight-current-row v-loading="loading" style="width: 100%;border-right:1px solid #74A6CC;border-bottom:1px solid #74A6CC">
          <el-table-column type="index" label="序号" width="100" align="center">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="90" align="center">
          </el-table-column>
          <el-table-column prop="trainingDate" label="参训时间" width="220" align="center">
            <template slot-scope="scope">
              {{scope.row.trainingDate?(scope.row.trainingDate+'至'+(scope.row.trainingEndDate?scope.row.trainingEndDate:scope.row.trainingDate)):scope.row.trainingDateRemark}}
            </template>
          </el-table-column>
          <el-table-column prop="duration" label="培训时长" width="110" align="center">
            <template slot-scope="scope">
              {{scope.row.duration?scope.row.duration+'天':''}}
            </template>
          </el-table-column>
          <el-table-column prop="trainUnit" label="举办单位" width="150">
          </el-table-column>
          <el-table-column prop="className" label="班次名称" width="150">
          </el-table-column>
          <el-table-column prop="place" label="参训地点">
          </el-table-column>
        </el-table>
      </section>
      <div v-else style="padding:10px;">暂无培训记录</div>
    </div>
  </div>
</template>
<script>
export default{
  watch: {
    personId: {
      handler (val) {
        this.personId = val
        this.getTainingList(val)
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      immediate: true
    },
    personname: {
      handler (val) {
        this.personname = val
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      immediate: true
    },
    unitname: {
      handler (val) {
        this.unitname = val
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      immediate: true
    }
  },
  props: {
    personId: '',
    personname: '',
    unitname: ''
  },
  data () {
    return {
      trainingList: [],
      loading: false
    }
  },
  methods: {
    getTainingList (id) {
      this.loading = true
      this.$http
        .get(this.$http.defaults.trainingAPI + `api/trainingBusFiledCandidate/getFiledList?idCardNo=` + id)
        .then(response => {
          this.loading = false
          if (response.data.success) {
            this.trainingList = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.loading = false
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    }
  },
  mounted () {
  }
}
</script>
<style>
#personTrainingTable .el-table td,#personTrainingTable .el-table th{
  padding:5px;
  border-left:1px solid #74A6CC;
  border-top:1px solid #74A6CC;
  border-right:0;
  border-bottom:0;
}
#personTrainingTable .el-textarea__inner{
  font-size:var(--size18) !important;
  color:#000 !important;
}
</style>
